<template>
    <div class="bill">
        <navs :navtitle="titles"></navs>
        <van-tabs title-active-color="#dd3333" title-inactive-color="#000">
            <van-tab title="账单明细">
                    <div class="bill-l">
                        <div class="bill-l-top">
                            <span>今日</span>
                            <p class="shai" @click="shais">
                                <span>筛选</span>
                                <i v-if="!shai" class="iconfont icon-unfold"></i>
                                <i v-else class="iconfont icon-arrow-up"></i>
                            </p>
                        </div>
                            <div class="bill-l-b" v-if="!shai">
                                <img src="../../../assets/ic_search_no_data.png" alt="">
                                <p>没有找到相关记录</p>
                            </div>
                            <div class="bill-show" v-else>
                                <p>订单号</p>
                                <input type="text" placeholder="请输入订单号">
                                <p>起止时间</p>
                                <div class="bill-time">
                                    <span @click="times">开始时间</span>
                                    <span>-</span>
                                    <span @click="times">结束时间</span>
                                </div>
                                <van-popup position="bottom" v-model="timer" :overlay="true">
                                    <van-datetime-picker
                                        v-model="currentDate"
                                        type="date"
                                        @confirm="Opentiemr"      
                                    />
                                </van-popup>
                                <p>选择门店</p>
                                <div class="bill-all">
                                    <span>全部</span>
                                </div>
                                <div class="bill-all bill-c">
                                    <span>9898989898</span>
                                </div>
                            </div>
                    </div>
            </van-tab>
            <van-tab title="账单汇总">
                <div class="bill-l">
                    <div class="ri-bill">
                        <p @click="bool" :class="!boo&&'active'">日账单</p>
                        <p @click="bool" :class="boo&&'active'">月账单</p>
                    </div>
                    <div class="bill-l-top">
                        <span v-if="!boo">今日</span>
                        <span v-else>当月</span>
                        <p class="shai" @click="shais">
                            <span>筛选</span>
                            <i v-if="!shai" class="iconfont icon-unfold"></i>
                            <i v-else class="iconfont icon-arrow-up"></i>
                        </p>
                    </div>
                    <div class="bill-l-b" v-if="!shai">
                        <img src="../../../assets/ic_search_no_data.png" alt="">
                        <p>没有找到相关记录</p>
                    </div>
                    <div class="bill-show" v-else>
                        <p>起止时间</p>
                        <div class="bill-time">
                            <span @click="times">开始时间</span>
                            <span>-</span>
                            <span @click="times">结束时间</span>
                        </div>
                        <van-popup position="bottom" v-model="timer" :overlay="true">
                            <van-datetime-picker
                                v-model="currentDate"
                                type="date"
                                @confirm="Opentiemr"      
                            />
                        </van-popup>
                        <p>选择门店</p>
                        <div class="bill-all">
                            <span>全部</span>
                        </div>
                        <div class="bill-all bill-c">
                            <span>9898989898</span>
                        </div>
                    </div>
                    <div></div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import navs from '../../../components/Navbar';
import { Tab, Tabs } from 'vant';
import Vue from 'vue';
import { DatetimePicker } from 'vant';

Vue.use(DatetimePicker);
Vue.use(Tab).use(Tabs);
import { Popup } from 'vant';

Vue.use(Popup);
export default {
    components:{
        navs,
    },
    data(){
        return{
            titles:'对账单',
            boo:false,
            shai:false,
            currentDate: new Date(),
            stata:new Date(),
            timer:false,

        }
    },
    methods:{
        bool(){
            this.boo=!this.boo;
        },
        times(){
            this.timer=!this.timer;
        },
        shais(){
            this.shai=!this.shai;
        },
        Opentiemr(){
            this.stata = this.currentDate
            this.timer=false;
        }
    }
}
</script>
<style scoped lang="scss">
// .bill{
//     position: absolute;
//     top: 0;
//     bottom:0;
//     background: #f2f1f6;
//     width: 100%;
// }
.bill-l-top{
    height: 0.4rem;
    padding: 0 0.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.14rem;
    background: #f8f8f8;
    .shai{
        .icon-unfold,.icon-arrow-up{
            font-size: 0.14rem;
            color: #ccc;
            margin-left: 0.05rem;
        }
    }
}
.bill-l-b{
    text-align: center;
    margin-top: 0.8rem;
    img{
        width: 1rem;
        height: 1rem;
    }
    p{
        font-size: 0.14rem;
        color: #999;
    }
}
.ri-bill{
    padding: 0.13rem 0.14rem;
    display: flex;
    background: #fff;
    border: 1px solid #f2f1f6;
    p{
        width: 0.6rem;
        height: 0.24rem;
        background: #f8f8f8;
        color: #000;
        font-size: 0.12rem;
        text-align: center;
        line-height: 0.24rem;
        margin-right: 0.2rem;
    }
    .active{
        background: #dd3333;
        color: #fff;
    }
}
.bill-show{
    padding: 0 0.15rem;
    p{
        padding: 0.2rem 0;
        font-size: 0.12rem;
        color: #333;
    }
    input{
        height: 0.24rem;
        border:none;
        line-height: 0.24rem;
        font-size: 0.14rem;
        border-bottom: 1px solid #f2f1f6;
        width: 100%;
    }
}
.bill-time{
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 0.03rem;
    font-size: 0.15rem;
    color: #999;
    line-height: 0.34rem;
}
.bill-all{
    font-size: 0.15rem;
    line-height: 0.44rem;
    border-top: 1px solid #f2f1f6;
}
.bill-c{
    border-bottom: 1px solid #f2f1f6;
}
</style>
